<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小六壬测试版</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="./js/vue.js"></script>
    <script src="./js/elm.js"></script>
</head>
<body>
    <div id="app">
        <div class="nav">小六壬</div>
        <div class="a"><a href="/yi/text.html">*算前须知*</a></div>
        <div class="inp">
            <el-input prefix-icon="el-icon-magic-stick" v-model="mobile" placeholder="请输入一个随机整数" oninput="value=value.replace(/[^\d]/g, '')"></el-input>
            
        </div>
        <div class="btn">
            <el-button type="success" @click='nums'>当你不知道用什么数字时点这</el-button>
        </div>
        <div class="btn">
            <el-button type="primary" size="default" @click="btn">测 测 运 气 吧</el-button>
        </div>
        <div class="really">
            <div v-if='text === 1 '>
                <div class="reahead">留连</div>
                <div class="reabody">
                    <p>口诀: 卒未归时，属水元武，谋事二八十，贵人南方，冲犯北方，大人乌面夫人，小孩游路亡魂</p>
                    <p>白话: 留连事难成，求谋日未明，官事凡宜缓，去者未回程，失物南方见，急讨方心称，更须防口舌，人口且平平。</p>
                    <p>解释: 指算的事情，会有拖延的意思，要去做的话，建议等等先哈</p>
                </div>
            </div>
            <div v-if='text === 2 '>
                <div class="reahead">速喜</div>
                <div class="reabody">
                    <p>口诀: 人便至时，属火未雀，谋事三六九，贵人西南，冲犯南方，大心火箭将军，小孩婆祖动物惊。</p>
                    <p>白话: 速喜喜来临，求财向南行，失物申未午，逢人路上寻，官事有福德，病者无祸侵，田宅六畜吉，行人有信音。</p>
                    <p>解释: 指算的事情，很快就会有好运到来啦，所以嘞，冲冲冲！</p>
                </div>
            </div>
            <div v-if='text === 3 '>
                <div class="reahead">赤口</div>
                <div class="reabody">
                    <p>口诀: 官事凶时，属金白虎，谋事四七十，贵人东方，冲犯西方，大人金神七煞，小孩迷魂童子。</p>
                    <p>白话: 赤口主口舌，官非切宜防，失物速速讨，行人有惊慌，六畜多作怪，病者出西方，更须防咀咒，诚恐染瘟。</p>
                    <p>解释: 指算的事情，不太好，运势多舛，有大事情的话，建议快点解决，越拖越不利</p>
                </div>
            </div>
            <div v-if='text === 4 '>
                <div class="reahead">小吉</div>
                <div class="reabody">
                    <p>口诀: 人来喜时，属水六合，谋事一五七，贵人西南，冲犯东方，大人无主家神，小孩婆祖六畜惊。</p>
                    <p>白话: 小吉最吉昌，路上好商量，阴人来报喜，失物在坤方，行人即便至，交关甚是强，凡事皆和合，病者叩穹苍。</p>
                    <p>解释: 指算的事情，皆为吉，但是不如大安的安稳也不如速喜快速，而是介于两者中间，保持目前状况就会越来越好。</p>
                </div>
            </div>
            <div v-if='text === 5 '>
                <div class="reahead">空亡</div>
                <div class="reabody">
                    <p>口诀: 音信稀时，属土勾陈，主事三六九，贵人北方，冲犯厝地，大人土压夫人，小孩土瘟神煞。</p>
                    <p>白话: 空亡事不详，阴人多乖张，求财无利益，行人有灾殃，失物寻不见，官事有刑伤，病人逢暗鬼，解禳保安康。</p>
                    <p>解释: 指算的事情，都没有好结果，一定要去做的话，可以先问问朋友的建议，自己就不要瞎搞了</p>
                </div>
            </div>
            <div v-if='text === 6 '>
                <div class="reahead">大安</div>
                <div class="reabody">
                    <p>口诀: 身未动时，属木青龙．谋事一五七，贵人西南，冲犯东方，大人青面阴神，小孩婆祖六畜惊。</p>
                    <p>白话: 大安事事昌，求财在坤方，失物去不远，宅舍保安康，行人身未动，病者主无妨，将军回田野，仔细更推详。</p>
                    <p>解释: 指算的事情，正常情况下都没什么问题，但是此为静卦，所以不建议搞太多事情</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data(){
            return {
                mobile:'',
                text:'',
                num:'',
                arr:''
            }
        },
        methods: {
            btn(){
                let a
                let b = []
                console.log(this.mobile);
                this.arr = this.mobile.split('')
                a =  this.arr.map(Number)
                a.forEach(i => {
                    if (i != 0) {
                        b.push(i)
                    }
                });
                console.log(b,11);
                this.num = b.reduce((total, currentValue, currentIndex, arr) =>{
                    return total + currentValue
                })
                this.text = this.num - (b.length -1)
                
            },
            nums(){
                this.mobile =  Math.ceil(Math.random()*100000000).toString();
                console.log(this.mobile);
            }
        },
        watch:{
            text:function(){
                    for (let index = 6; this.text > index; index++) {
                        this.text = this.text - 6
                        console.log(this.text);
                }
            }
        }
    })
</script>
<style>
    #app {
        width: 100%;
        /* height: 100%; */
        margin: 0 auto;

    }
    .nav {
        font-size: 30px;
        text-align: center;
    }
    .a {
        text-align: center;
        margin-top: 20px;
    }
    a {
        
        color: red;
        text-decoration:none;
    }
    .inp {
        width: 300px;
        margin: 0 auto;
        margin-top: 20px;
        
        
    }
    .txt {
        text-align: center;
        margin-top: 20px;
    }
    .btn {
        width: 250px;
        margin: 0 auto;
        margin-top: 20px;
    }
    .el-button {
        width: 100%;
    }
    .really {
        width: 300px;
        margin: 20px auto 0px;
    }
    .reahead {
        text-align: center;
        font-size: 20px;
    }
</style>
</html>